<!--
 * @Author: 张升 1562821455@qq.com
 * @Date: 2023-12-19 11:37:24
 * @LastEditors: 张升 1562821455@qq.com
 * @LastEditTime: 2023-12-19 14:17:57
 * @FilePath: \school-admin-webc:\Users\Administrator\Desktop\aa.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>滚动列表</title>
</head>

<body>
    <div id="app">
        <p>{{message}}</p>
        <div class="schedule">
            <div class="schedule_list">
                <div class="schedule_list_title">
                    <div style="flex: 0 0 20%">姓名</div>
                    <div style="flex: 0 0 20%">排</div>
                    <div style="flex: 0 0 20%">班</div>
                    <div style="flex: 0 0 20%">床位号</div>
                    <div style="flex: 0 0 20%">时间段</div>
                </div>
    
                <div
                    ref="scheduleScroll"
                    class="schedule_list_data"
                    @mouseout="setScrollState(true)"
                    @mouseover="setScrollState(false)"
                >
                    <div v-for="(item, index) in scheduleList" :key="index" class="schedule_list_item">
                        <div style="flex: 0 0 20%">{{ item.name }}</div>
                        <div style="flex: 0 0 20%">{{ item.gradeName }}</div>
                        <div style="flex: 0 0 20%">{{ item.className }}</div>
                        <div style="flex: 0 0 20%" class="bigscreen_num">{{ item.bedName }}</div>
                        <div style="flex: 0 0 20%" class="bigscreen_num">{{ item.time }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "滚动列表",
            scheduleList: [
                {
                    name: "张三",
                    gradeName: "一年级",
                    className: "一班",
                    bedName: "101",
                    time: "10:00-12:00"
                },
                {
                    name: "李四",
                    gradeName: "一年级",
                    className: "一班",
                    bedName: "102",
                    time: "10:00-12:00"
                },
                {
                    name: "王五",
                    gradeName: "一年级",
                    className: "一班",
                    bedName: "103",
                    time: "10:00-12:00"
                },
                {
                    name: "赵六",
                    gradeName: "一年级",
                    className: "一班",
                    bedName: "104",
                    time: "10:00-12:00"
                },
                {
                    name: "孙七",
                    gradeName: "一年级",
                    className: "一班",
                    bedName: "105",
                    time: "10:00-12:00"
                },
                {
                    name: "周八",
                    gradeName: "一年级",
                    className: "一班",
                    bedName: "106",
                    time: "10:00-12:00"
                },
                {
                    name: "吴九",
                    gradeName: "一年级",
                    className: "一班",
                    bedName: "107",
                    time: "10:00-12:00"
                },
                {
                    name: "郑十",
                    gradeName: "一年级",
                    className: "一班",
                    bedName: "108",
                    time: "10:00-12:00"
                },
                {
                    name: "王十一",
                    gradeName: "一年级",
                    className: "一班",
                    bedName: "109",
                    time: "10:00-12:00"
                },
                {
                    name: "赵十二",
                    gradeName: "一年级",
                    className: "一班",
                    bedName: "110",
                    time: "10:00-12:00"
                },
                {
                    name: "孙十三",
                    gradeName: "一年级",
                    className: "一班",
                    bedName: "111",
                    time: "10:00-12:00"
                },
                {
                    name: "周十四",
                    gradeName: "一年级",
                    className: "一班",
                    bedName: "112",
                    time: "10:00-12:00"
                },
                {
                    name: "吴十五",
                    gradeName: "一年级",
                    className: "一班",
                    bedName: "113",
                    time: "10:00-12:00"
                },
            ],
            scrollSetInterval: null, // 滚动定时器
            scrollSetIntervalCurTop: 0, // 记录当前滚动的位置
        },
        methods: {
            setScrollState(val) {
                const node = this.$refs.scheduleScroll
                if (val) {
                    if (!this.scrollSetInterval) {
                    this.scrollSetInterval = setInterval(() => {
                        this.scrollSetIntervalCurTop += 1
                        node.scroll(0, this.scrollSetIntervalCurTop)
                        // 滑动到底部时自动滚回头部
                        if ((this.scrollSetIntervalCurTop + node.clientHeight) >= node.scrollHeight) {
                        this.scrollSetIntervalCurTop = 0
                        }
                    }, 100)
                    }
                } else {
                    clearInterval(this.scrollSetInterval)
                    this.scrollSetInterval = null
                    this.scrollSetIntervalCurTop = node.scrollTop
                }
            }
        },
        mounted() {
            this.setScrollState(true)
        }
    })
</script>
<style>
    .schedule {
        width: 600px;
        height: 200px;
        background: #043e40;
        color: #fff;
    }
    
    .schedule_list {
        width: 100%;
        height: 100%;
        /* background: url('http://troop.isuke.com.cn/static/img/bottombox.a9501974.png') no-repeat;
        background-size: 100% 100%; */
        font-size: 14px;
    }
    
    .schedule_list_title {
        width: 100%;
        height: 44px;
        background: url('') no-repeat;
        background-size: 100% 100%;
        display: flex;
        line-height: 44.0006px;
        font-size: 15.9994px;
        font-weight: 700;
    }
    .schedule_list_title > div{
        text-align: center;
    }
    .schedule_list_data{
        position: relative;
        height: calc(100% - 48px);
        overflow: auto;
    }
    .schedule_list_item{
        display: flex;
        padding: 12px 6px;
    }
    .schedule_list_item > div{
        text-align: center;
    }
    .schedule_list_data::-webkit-scrollbar {
        display: none;
    }
</style>

</html>